<!--
 * @Author: Wangtao
 * @Date: 2020-10-22 19:27:39
 * @LastEditors: zhanwang
 * @LastEditTime: 2021-10-20 15:36:31
-->
<template>
  <drawer-box>
    <template v-slot:content>
      <el-form class="m7-form" :label-position="labelPosition" :model="formData" size="mini" ref="nodeForm">
        <el-form-item label="节点名称">
          <el-input v-model.trim="formData.name" disabled size="mini"></el-input>
        </el-form-item>
        <el-tabs v-model="activeName" type="card" @tab-click="() => {}">
          <el-tab-pane label="自定义参数" name="first">
            <div class="tips">
              <i style="color: #faad14; font-size: 14px; margin-right: 7px" class="MC_iconfont MC_icon-xinxi-mian"></i>
              <span>参数用于语音导航流程中的传递，参数名称不可重复。</span>
            </div>
            <div v-for="(item, index) in formData.customList" :key="item._id">
              <div class="select-group-start">
                <el-form-item label="参数" :prop="'customList.' + index + '.key'" :rules="checkKey">
                  <template v-slot:label>
                    <span>
                      参数
                      <el-tooltip
                        :show-after="500"
                        class="item"
                        effect="dark"
                        content="在数据交互节点如果要替换此参数的值，需要在返回的参数前加customer_前缀。"
                        placement="top"
                      >
                        <span style="font-size: 14px" class="MC_iconfont MC_icon-yiwen-mian tip-span"></span>
                      </el-tooltip>
                    </span>
                  </template>
                  <el-input v-model.trim="item.key" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="初始值">
                  <el-input v-model.trim="item.value" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                  <el-input v-model.trim="item.memo" size="mini"></el-input>
                </el-form-item>
                <div class="select-oprate">
                  <span @click="deleteCustomList(item, index)"
                    ><i style="font-size: 20px" class="MC_iconfont MC_icon-shanchu2-xian delete-span"></i
                  ></span>
                </div>
              </div>
            </div>
            <div class="addCondition">
              <span @click="addCustomList"><i class="MC_iconfont MC_icon-tianjia-xian add-span"></i>增加条件</span>
            </div>
          </el-tab-pane>
          <el-tab-pane label="系统参数" name="second">
            <div class="tips">
              <i style="color: #faad14; font-size: 14px; margin-right: 7px" class="MC_iconfont MC_icon-xinxi-mian"></i>
              <span>系统参数由平台提供，自定义参数不可与系统参数名重复。</span>
            </div>
            <el-table
              :data="tableData"
              header-row-class-name="myTable"
              :row-style="{
                height: '32px'
              }"
              max-height="400"
              style="width: 100%; margin-bottom: 10px"
            >
              <el-table-column prop="key" label="参数"> </el-table-column>
              <el-table-column prop="memo" label="字符串"> </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
        <el-form-item :label="item.label" prop="region" v-for="(item, index) in condition" :key="index">
          <el-select v-model="item.to" placeholder="请选择下一步节点" filterable clearable>
            <el-option
              v-for="(node, index) in nodeList"
              :label="node.data.name"
              :value="node.id"
              v-show="!node.viewOnly && node.id !== currentData.id && node.id !== 'startNode'"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </template>
    <template v-slot:operation>
      <el-button @click="cancel" size="mini">取消</el-button>
      <el-button type="primary" @click="onSubmit" size="mini">确定</el-button>
    </template>
  </drawer-box>
</template>

<script lang="ts" setup>
/* eslint-disable vue/no-mutating-props */
import drawerBox from '@/app/call-center/components/drawer-box.vue'
import useNodeCommon from './use-node-common'
import { reactive, defineProps, ref, withDefaults, toRefs, onMounted, computed } from 'vue'
import { isEmpty, get } from 'lodash'
import { ElMessage } from 'element-plus'
import http from '@/common/utils/http'

const state: any = reactive({
  activeName: 'first',
  tableData: []
})
const nodeForm = ref(null)
const props = withDefaults(
  defineProps<{
    data: any
    currentNode: any
    save: (...arg: any) => void
    cancel: () => void
    delete: (...arg: any) => void
  }>(),
  {
    data: {},
    currentNode: {}
  }
)

const { formData, labelPosition, nodeList, currentData, condition, onSubmit, cancel }: any = useNodeCommon({
  data: props.data,
  currentNode: props.currentNode,
  nodeForm,
  save: props.save,
  cancel: props.cancel,
  delete: props.delete
})

onMounted(() => {
  if (isEmpty(get(props.currentNode.data, 'customList'))) {
    props.currentNode.data.customList = [
      {
        key: '',
        value: '',
        memo: ''
      }
    ]
  }
  getPublicCustom()
  props.currentNode.data.variableType = 'custom'
})

const addCustomList = () => {
  if (formData?.customList?.length > 99) {
    ElMessage.warning('条数不能超过100')
    return
  }
  formData.value.customList.push({
    key: '',
    value: '',
    memo: ''
  })
}

const deleteCustomList = (_: any, i: number) => {
  formData.value.customList.splice(i, 1)
}

const getPublicCustom = () => {
  const url = '/call/web/call/action/config/ivr/system-var/cache'
  http({ url, method: 'get' }).then((res: any) => {
    if (res.success) {
      state.tableData = res.data || []
    }
  })
}

const checkKey = computed(() => {
  const keyList = formData.value.customList?.map((i: any) => i.key) || []
  const publicList = state.tableData.map((i: any) => i.key) || []
  const checkKey = (_: any, value: any, callback: any) => {
    if (!new RegExp('^[A-Za-z0-9_]{0,50}$').test(value)) {
      callback(new Error('支持大小写英文+数字+下划线格式，区分大小写，至多50字符'))
    } else if (keyList.filter((i: any) => i === value).length > 1) {
      if (value) {
        callback(new Error('参数名已存在'))
      } else {
        callback(new Error('参数名为空'))
      }
    } else if (publicList.includes(value)) {
      callback(new Error('与系统参数冲突'))
    } else {
      callback()
    }
  }
  return { trigger: 'blur', validator: checkKey }
})

const { activeName, tableData } = toRefs(state)
</script>

<style lang="stylus" scoped>
.start-node
  height 100%
.select-oprate
  display: flex;
  align-items: center;
  position: relative;
  top: 5px;
  left: 0;
.delete-span
  cursor pointer
  &:hover
    color $c-danger
.select-group-start
  display flex
  :deep(.el-form-item)
    width 33%
    margin-right 10px
.addCondition
  display: flex;
  align-items: center;
  color: #008cee;
  cursor: pointer;
  margin-bottom: 15px;
  i
    font-size 16px
.add-span
  font-size 16px
  &:before
    margin-right 4px
.tips
  height: 34px;
  background: #FFFBE6;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #303753;
  line-height: 34px;
  padding-left 12px
  margin-bottom 10px
:deep(.el-table) .myTable th
  height: 32px;
  background: var(--mc-gray1-color);
  border-radius: 4px 4px 0px 0px;
  font-size: 12px;
  font-weight: 400;
  color: #303753;
:deep(.el-table) td
  padding 4px 0
.tip-span
    color $icon-gray
    font-size 12px
    cursor pointer
</style>
